<!--
相对定位
    position: relative;
        - 自恋型。相对于自身原来位置移动，而不是父、也不是浏览器。
        - 典型应用是给绝对定位当爹，也就是“子绝父相”

特点
    1）移动的参照点是原来的位置
        - 相对自己原来位置移动
    2）原来位置仍保留占有，后面盒子依旧以标准流方式对待
        - 即不脱标、不脱离文档流，仍保留原来位置，但也浮起来了

脱标必须满足两个条件：不占位置、浮起来
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    div {
        margin: 0 auto;
    }
    .one {
        width: 200px;
        height: 200px;
        background: red;
    }
    .two {
        /* ------------- */
        /* 相对原来位置：上往下20，左往右50 */
        position: relative;
        top: 20px;
        left: 50px;
        /* ------------- */
        width: 200px;
        height: 200px;
        background: green;
    }
    .three {
        width: 200px;
        height: 200px;
        background: blue;
    }
</style>

<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>